@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

$color_bg: #FDF8F5;
$color_accent: #BF4722;
$color_accent2: #F3C7BA;
$color_neutral: #1A202C;

@layer base {
  h1 {
    @apply text-6xl font-black tracking-normal;
  }

  a {
    @apply text-rw-500 hover:text-rw-700 underline hover:no-underline transition duration-100;
  }

  code {
    @apply text-red-700 bg-red-200 py-[2px] px-1 mx-1 rounded text-sm;
  }

  strong {
    @apply font-semibold;
  }
}

@layer components {
  .button {
    @apply block px-4 py-3 text-center font-semibold rounded bg-forest-400 hover:bg-forest-500 text-neutral-900 hover:text-white transition duration-200 text-lg no-underline disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-forest-600;
  }

  .button-alt {
    @apply bg-rw-400 hover:bg-rw-500 text-white hover:text-white font-semibold rounded px-6 py-3 uppercase transition duration-150;
  }

  .button-sm {
    @apply button text-base px-3 py-2;
  }

  .button-invert {
    @apply button bg-white text-forest-600 hover:bg-forest-100 hover:text-forest-700 disabled:hover:bg-white;
  }

  .button-social {
    @apply button flex flex-row items-center no-underline p-2 rounded-full space-x-2.5 text-sm;

    &.discord {
      @apply text-white bg-[#5865F2] hover:bg-[#4150f1];
    }

    &.github {
      @apply text-white bg-[#333] hover:bg-[#262626];
    }

    &.linkedin {
      @apply text-white bg-[#0077b5] hover:bg-[#006399];
    }

    &.productHunt {
      @apply text-white bg-[#da552f] hover:bg-[#cc4824];
    }

    &.twitter {
      @apply text-white bg-[#1da1f2] hover:bg-[#0d94e7];
    }
  }

  .actions {
    @apply flex flex-row justify-end;
  }

  ul.navigate li a {
    text-decoration: none;
  }

  ul.navigate li:hover a {
    text-decoration: underline;
  }

  ul.navigate li {
    @apply p-2;
  }

  .job {
    @apply pb-24;

    .markdown {
      p {
        @apply mt-4 leading-7;
      }

      ul {
        @apply list-disc;
      }
    }
  }

  .showcase--jobs--locations {
    @apply text-sm text-neutral-600;

    ul {
      @apply flex flex-row flex-wrap space-x-2;

      li:not(:last-child)::after {
        content: ';';
      }
    }

  }

  // Reference, styled around the following "test" file
  // https://raw.githubusercontent.com/mxstbr/markdown-test-file/master/TEST.md
  .startup-markdown {
    // Space beteween landmark elements
    h2, h3, h5, h5, h6, p, blockquote, pre, hr, ol, ul {
      &:not(:last-child) {
        @apply mb-6;
      }
    }

    // Typography
    h2 {
      @apply text-3xl font-bold pb-2.5 mb-4 border-b border-stone-300;
    }
    h3 {
      @apply text-xl font-semibold;
    }
    h4 {}
    h5 {}
    h6 {}
    blockquote {
      @apply pl-4 py-1.5 space-y-2.5 border-l-4 border-stone-300 text-stone-600;
    }

    //
    a {
      @apply no-underline hover:underline hover:text-teal-800;
    }

    //
    hr {
      @apply border-2 border-stone-300 border-opacity-50;
    }

    // List
    ol, ul {
      @apply list-outside ml-4 pl-4;
    }
    ul {
      @apply list-disc;

      ul {
        @apply list-[circle];
      }
    }
    ol {
      @apply list-decimal;
    }
    li {
      @apply list-item py-1;
    }
  }

  .card {
    @apply flex rounded md:w-64 md:ml-4;
    background-color: $color_accent;
  }

  .card.external header {
    h1 {
      color: $color_accent;
    }
  }

  .card footer {
    @apply flex flex-row;
  }

  .card .content > div {
    @apply flex flex-col text-sm py-8 px-4;

    a {
      @apply text-white;
    }

    a:not([target="_blank"]) {
      @apply underline;
    }
  }

  .card.external {
    min-width: 90px;
    border: 1px solid $color_accent2;
  }

  .tag {
    @apply text-xs px-2 py-1 rounded shadow;
    background-color: $color_bg;
  }

  .title {
    @apply text-xl text-stone-900 font-semibold tracking-tight;
  }

  .page_examples .filters {
    @apply sticky top-0 z-10 w-full shadow-forest-50 shadow-xl;


    .bar {
      @apply from-[#BF4722] to-amber-50 bg-blend-overlay bg-gradient-to-l;
      @apply justify-items-center flex flex-row w-full flex-wrap p-4;
    }

    p {
      color: $color_accent
    }

    .tag {
      @apply ml-2 mr-0 mb-0;
    }

    .button {
      @apply py-0 font-normal;
    }
  }

  .page_examples section.highlights {

    .card {
      @apply mt-8;
      background-color: $color_bg;
    }

    .card.highlight {

      @apply grid grid-cols-1 grid-rows-2 w-full m-auto mt-4;
      @apply md:w-2/3 md:grid-cols-2 md:grid-rows-1;
      @apply bg-gradient-to-r from-forest-600 to-forest-800;

      .content div {
        @apply relative float-right;
      }

    }

    .card.highlight:nth-child(2n+2) {
      background-color: $color_neutral;
    }

  }

  .jobForm {

    .input {
      @apply sm:flex items-start mt-12;
    }

    .column {
      @apply px-4;

      &:first-child {
        @apply sm:w-2/3 px-4;
      }

      &:last-child {
        @apply sm:w-1/3;
      }
    }


    .help {
      @apply mt-2 sm:mt-8 text-sm text-gray-500 leading-6;
    }

    .tags {
      @apply flex flex-wrap items-center mt-1;

      li {
        @apply mt-1 mr-2 px-2 py-1 flex items-center text-sm bg-rw-200 text-rw-700 rounded whitespace-nowrap;

        .icon {
          @apply ml-2 text-rw-400 transition duration-150;

          &:hover {
            @apply font-semibold text-red-700;
          }
        }
      }
    }

    label {
      @apply block text-lg text-forest-600 font-semibold;

      &.error {
        @apply text-red-600;
      }
    }

    input, textarea {
      @apply block w-full mt-2 py-3 px-4 bg-white border border-rw-200 rounded;

      &.error {
        @apply outline outline-2 outline-red-600;
      }
    }

    textarea {
      @apply h-72;
    }

    input:focus, textarea:focus {
      @apply outline-forest-600;
    }

    .button-attach {
      input {
        @apply rounded-r-none border-r-transparent;
      }

      button {
        @apply mt-2 py-3 px-8 button-alt border border-rw-400 rounded-l-none;

        &:hover {
          @apply border-rw-500;
        }
      }
    }

    .fieldError {
      @apply block mt-2 text-sm text-red-600;
    }
  }

  .line-height {
    line-height: 1.25;
  }
}

@layer utilities {

  .icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
  }

  .icon.md-12 {
    font-size: 12px;
  }

  .icon.md-13 {
    font-size: 13px;
  }

  .icon.md-14 {
    font-size: 14px;
  }

  .icon.md-16 {
    font-size: 16px;
  }

  .icon.md-18 {
    font-size: 18px;
  }

  .icon.md-20 {
    font-size: 20px;
  }

  .icon.md-22 {
    font-size: 22px;
  }

  .icon.md-24 {
    font-size: 24px;
  }

  .icon.md-26 {
    font-size: 26px;
  }

  .icon.md-28 {
    font-size: 28px;
  }

  .icon.md-36 {
    font-size: 36px;
  }

  .icon.md-48 {
    font-size: 48px;
  }
}
